<template>
    <div class="register-confirm">
        <div class="success-container">
            <div class="title">
                <span class="register-pic">
                    <i class="icon icon-check"></i>
                </span>
                <span class="text">{{$t('confirm.title')}}</span>
            </div>
            <div class="level">
                {{$t('confirm.text')}}
            </div>
            <a href="./login.html" class="ui-btn ui-btn--block ui-btn--big">{{$t('toIndex',{count:leftSeconds})}}</a>
        </div>
    </div>
</template>

<script type="text/babel">
    import Loading from '../../../grsc-base/component/Loading.vue';
    export default {
        components: {
            Loading
        },
        data() {
            return {
                isLoading: true,
                leftSeconds:15
            };
        },
        created() {
            this.countDown();
        },
        methods: {
            countDown(){
                let timer = setInterval(()=> {
                    this.leftSeconds--;
                    if (this.leftSeconds <= 1) {
                        clearInterval(timer);
                        location.href = './index.html';
                    }
                }, 1000)
            }

        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    @import "../../scss/base/var";
    .register-confirm {
        box-sizing: border-box;
        margin:0 auto;
        width: 700px;
        line-height: 2;
        .success-container {
            padding: 56px 64px;
            //border: 1px #efefef solid;
            //border-radius: 4px;
            //background-color: rgba(255,255,255,.6);
            .title {
                margin-bottom: 40px;
                text-align: center;
                font-size: 20px;
                line-height: 1.2;
                .register-pic {
                    box-sizing: border-box;
                    display: inline-block;
                    width: 46px;
                    height: 46px;
                    line-height: 46px;
                    margin-right: 16px;
                    border: 3px #0a94ff solid;
                    //padding-right: 16px;
                    text-align: center;
                    font-size: 18px;
                    border-radius: 50%;
                    padding-top: 3px;
                    vertical-align: middle;
                    .icon {
                        font-size: 34px;
                        color: #0a94ff;
                    }
                }
                .text {
                    display: inline-block;
                    width: 60%;
                    text-align: left;
                    vertical-align: middle;
                    color: #fff;
                    line-height: 1.5;
                }
            }
            .level {
                padding: 0 70px;
                font-size: 13px;
                font-weight: bold;
                font-family: inherit;
                color: #5b5d65;
            }
            .list-title {
                padding-left: 4px;
                color: $color-font-gray;
            }

            .ui-btn{
                margin: 0 auto;
                margin-top: 40px;
                width: 426px;
                transition: all 0s;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
            }
        }
    }
</style>